<template>
    <twoGridPanel>
        <template #left>
            <a-card :bordered="false">
                <orgTree @emitId="emitId" @getTree="getTree" :treeData="treeData"></orgTree>
            </a-card>
        </template>
        <template #right>
            <new-search-panel :showAdvanced="false" @search="onSearch" @reset="onReset">
                <template #default>
                    <a-col :md="24" :sm="24">
                        <a-form-item label="机构名称">
                            <a-input :maxLength="35" v-model:value="queryParam.name" allow-clear placeholder="请输入机构名称" />
                        </a-form-item>
                    </a-col>
                </template>
                <template #advanced>
                    <!-- 这里放置扩展查询项 -->
                </template>
                <template #button>
                    <a-button type="primary" @click="addForm()">
                        <template #icon><PlusOutlined /></template>
                        新增机构</a-button
                    >
                </template>
            </new-search-panel>
            <!-- list table -->
            <dynamic-table
                :tableType="1"
                ref="tableRef"
                :columns="columns"
                :get-list-func="getOrgPage"
                :queryParam="queryParam"
                :rowKey="(record) => record.id"
                :scrollX="1000"
                :fixed="true"
            >
                <template #sex="{ text }" v-if="sexlist.length > 0">
                    {{ filterEnum(sexlist, text) }}
                </template>
                <template #action="{ record }">
                    <a @click="editForm(record)">编辑</a>
                    <a-divider type="vertical" />
                    <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => del(record)">
                        <a>删除</a>
                    </a-popconfirm>
                </template>
            </dynamic-table>
            <orgFrom ref="formRef" @refresh="refresh" :treeData="treeData2" :title="title" />
        </template>
    </twoGridPanel>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, createVNode, onMounted, ref, computed } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
// import { changeStatus, getUserList } from '@/api/system/user'
import { getOrgPage, sysOrgDelete, getOrgTree } from '@/api/system/org'
import { columns } from './columns'
import { useFormModal } from '@/hooks/useFormModal'
import { getFormSchema } from './form-schema'
import { filterEnum } from '@/utils/common'
import { useStore } from '@/store'
import { newSearchPanel, DynamicTable, twoGridPanel } from '@/components'
import orgTree from './components/org-tree.vue'
import orgFrom from './components/orgFrom.vue'
export default defineComponent({
    name: 'SystemRole',
    components: {
        DynamicTable,
        newSearchPanel,
        twoGridPanel,
        orgTree,
        orgFrom
    },
    setup() {
        const tableRef = ref<any>(null)
        const store = useStore()
        const formRef = ref<any>(null)
        const state = reactive({
            title: '',
            treeData: [],
            treeData2: [] as any,
            sexlist: [],
            statusDictTypeDropDown: [],
            queryParam: {
                name: '',
                pid: ''
            },
            tableLoading: false,
            rowSelection: {
                onChange: (selectedRowKeys, selectedRows) => {
                    state.rowSelection.selectedRowKeys = selectedRowKeys
                },
                selectedRowKeys: []
            }
        })
        onMounted(() => {
            store.dispatch('enums/getEnum', 'sex').then((res) => {
                state.sexlist = res
            })
            store.dispatch('enums/getEnum', 'common_status').then((res) => {
                state.statusDictTypeDropDown = res
            })
            getOrgTree({}).then((res) => {
                state.treeData = res
                state.treeData2 = [
                    {
                        id: '-1',
                        parentId: '0',
                        title: '顶级',
                        value: '0',
                        pid: '0',
                        children: res
                    }
                ]
            })
        })
        function getTree() {
            getOrgTree({}).then((res) => {
                state.treeData = res
                state.treeData2 = [
                    {
                        id: '-1',
                        parentId: '0',
                        title: '顶级',
                        value: '0',
                        pid: '0',
                        children: res
                    }
                ]
            })
        }
        /**
         * 树事件
         */
        function emitId(e) {
            onReset()
            state.queryParam.pid = e
            tableRef.value.refreshTableData(state.queryParam)
        }
        /**
         * 编辑
         */
        function editForm(e) {
            state.title = '编辑机构'
            formRef.value.add = false
            formRef.value.visible = true
            formRef.value.detailData = e
        }
        /**
         * 删除
         * @param record
         */
        function del(record) {
            sysOrgDelete(record).then((res) => {
                message.success('删除成功')
                refresh()
            })
        }
        /**
         * 查询
         */
        function onSearch() {
            tableRef.value.queryParam = state.queryParam
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
            getTree()
        }
        function refresh() {
            tableRef.value.refreshTableData()
            getTree()
        }
        /**
         * 重置
         */
        function onReset() {
            state.queryParam = {
                name: '',
                pid: ''
            }
            onSearch()
        }
        /**
         * 新增用户
         */
        function addForm() {
            state.title = '新增机构'
            formRef.value.visible = true
            formRef.value.add = true
        }
        return {
            ...toRefs(state),
            columns,
            tableRef,
            getOrgPage,
            onReset,
            onSearch,
            refresh,
            addForm,
            filterEnum,
            del,
            formRef,
            sysOrgDelete,
            emitId,
            editForm,
            getTree
        }
    }
})
</script>
<style scoped lang="scss">
.wrap {
    display: flex;
    justify-content: space-between;
}
.fl {
    background: #fff;
    margin-right: 20px;
    width: 205px;
}
.fr {
    flex: 1;
}
</style>
<style scoped lang="scss">
:deep(.ant-tree-title) {
    width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
</style>
